<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- axios 网络请求 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>demo</title>
</head>

<body>


    <div id="app">


        <el-container>
            <el-header>

 

            </el-header>
            <el-main>

                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <template v-for="(item,index) in fenlist">
                        <el-menu-item :index="item.id.toString()"  v-if="!item.list">{{item.name}}</el-menu-item>
                        <template v-else>
                            <el-submenu :index="item.id.toString()" >
                                <template slot="title">{{item.name}}</template>
                                <template v-if="item.list&&!item.list[0].list">
                                    <el-menu-item :index="items.id.toString()" 
                                        v-for="(items,indexs) in item.list">
                                        {{items.name}}</el-menu-item>
                                </template>
                                <el-submenu :index="items.id.toString()"  v-else
                                    v-for="(items,indexs) in item.list">
                                    <template slot="title">{{items.name}} </template>
                                    <el-menu-item :index="itemd.id.toString()" 
                                        v-for="(itemd,indexd) in item.list[indexs].list">
                                        {{itemd.name}}</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                        </template>
                    </template>
                </el-menu>



                <el-row class="tac">
                    <el-col :span="4">
                      <h5>默认颜色</h5>
                      <el-menu :default-active="activeIndex2"
                       class="el-menu-vertical-demo"
                      @open="handleOpen"
                      @close="handleClose"
                       mode="vertical" @select="handleSelect"
                      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                      <template v-for="(item,index) in fenlist">
                          <el-menu-item :index="item.id.toString()"  v-if="!item.list">{{item.name}}</el-menu-item>
                          <template v-else>
                              <el-submenu :index="item.id.toString()" >
                                  <template slot="title">{{item.name}}</template>
                                  <template v-if="item.list&&!item.list[0].list">
                                      <el-menu-item :index="items.id.toString()" 
                                          v-for="(items,indexs) in item.list">
                                          {{items.name}}</el-menu-item>
                                  </template>
                                  <el-submenu :index="items.id.toString()"  v-else
                                      v-for="(items,indexs) in item.list">
                                      <template slot="title">{{items.name}} </template>
                                      <el-menu-item :index="itemd.id.toString()" 
                                          v-for="(itemd,indexd) in item.list[indexs].list">
                                          {{itemd.name}}</el-menu-item>
                                  </el-submenu>
                              </el-submenu>
                          </template>
                      </template>
                  </el-menu>
                    </el-col>
                </el-row>

            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>


    </div>
    <script>

        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
            
                fenlist: [],
             
                activeIndex: '1',
                activeIndex2: '1'

            }
            ,
            // 在 `methods` 对象中定义方法
            methods: {
                handleSelect(key, keyPath) {
                    console.log(key+"分类ID");
                    console.log(keyPath+"路径");
                },
                handleSelecta(event) {
                    console.log(event);
                },
               

                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                },

                getfen() {
                    axios
                        .get('http://tp6.hao120vip.com/index.php/admin/index/getfen')
                        .then(response => (
                            this.fenlist = response.data,
                            console.log(response.data)
                        ))
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });

                },
                

            },
            created: function () {
                var tach = this;
                this.getfen();
               

            },
            mounted: function () {

            }
        })


    </script>

    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 600px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

 
    </style>


</body>

</html>